<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>

	<link type="text/css" href="css/common.css" rel="stylesheet">
	<link type="text/css" href="css/scrolltotop.css" rel="stylesheet">
	<link type="text/css" href="css/backtotop.css" rel="stylesheet">
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="container">
	<div class="header">
		<h1>Header(Scroll to top)</h1>
	</div>

	<div class="content">
		<p>Content</p>
	</div>

	<div class="footer">
		<hr />
		<p>Footer</p>
		<a href="#" class="scroll-to-top">To top</a>

		<div id="backtotop" class="showme">
			<div class="bttbg"></div>
		</div>
	</div>
</div>
<!-- end container -->
<script>
	$(document).ready(function ()
	{
		scrollToTop();

		initGoToTop();
	});
	//	Simple demo
	function scrollToTop()
	{
		var $scrollToTop = $('.scroll-to-top');
		$(window).scroll(function ()
		{
			if ($(this).scrollTop() > 150)
			{
				$scrollToTop.addClass('show');
			}
			else
			{
				$scrollToTop.removeClass('show');
			}
		});
		$scrollToTop.click(function (e)
		{
			e.preventDefault();
			$('html, body').animate({scrollTop: 0}, 500);
		});
	}
	//	Good demo
	function initGoToTop()
	{
//		var b = jQuery("#footer").position().top - jQuery(window).height() - 200;
		jQuery(function ()
		{
			jQuery(window).scroll(function ()
			{
				if (jQuery(this).scrollTop() > 100)
				{
					jQuery("#backtotop").addClass("showme")
				}
				else
				{
					jQuery("#backtotop").removeClass("showme")
				}
			});
			jQuery("#backtotop").click(function ()
			{
				jQuery("body,html").animate({
					scrollTop: 0
				}, 400);
				return false
			})
		});
		if (jQuery(window).scrollTop() == 0)
		{
			jQuery("#backtotop").removeClass("showme")
		}
		else
		{
			jQuery("#backtotop").addClass("showme")
		}
	}
</script>
</body>
</html>